<template>
	<view>
		<view class="header">
			<view class="line"></view>
			<view class="header_text">请选择充值金额</view>
			<view class="line"></view>
		</view>
		<view class="container">
			<view @click="selectHandle(item, index)" class="price" :class="index == current ? 'priceSelectd' : ''" v-for="(item, index) in priceList" :key="index">
				<view class="price_top">{{ item.price }}元</view>
				<view class="price_bottom">{{ item.title }}</view>
				<view v-if="item.tuijian !== '0'" class="recommend">推荐</view>
			</view>
		</view>
		<view class="footer" @click="show=true" >提交</view>
		<u-popup v-model="show" mode="center" :mask-close-able="false">		
			<view class="popup">
				<view class="close" @click="show=false">
					<u-icon name="close" size="30"></u-icon>
				</view>
				<view class="form">
					<view class="name">
						<text>姓名</text>
						<input type="text" maxlength="6" v-model="name" placeholder="请输入姓名" />
					</view>
					<view class="name">
						<text>电话</text>
						<input type="number" maxlength="11" v-model="mobile" placeholder="请输入联系电话" />
					</view>
					<view class="chongzhi" @click="resHandle">
						确认充值
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { lists, addOrder } from '@/api/user/userCenter/myWallet/myWallet.js';
export default {
	data() {
		return {
			priceList: [
				// {
				// 	balance: 120,
				// 	id: 1,
				// 	price: '60.00',
				// 	title: '充200送20',
				// 	tuijian: '0'
				// }
			],
			current: -1,
			payFlag: true,
			show:false,
			name:'',
			mobile:''
		};
	},
	async onLoad() {
		let res = await lists();
		this.priceList = res.data;
	},
	onReady() {
		if (typeof window.WeixinJSBridge == 'undefined') {
			this.payFlag = false;
		} else {
			this.payFlag = true;
		}
	},
	methods: {
		selectHandle(item, index) {
			this.current = index;
		},
		async resHandle() {
			let that=this
			if (this.current < 0) {
				uni.showToast({
					title: '请选择充值金额',
					icon: 'none'
				});
			} else {
				if(this.name && this.$u.test.mobile(this.mobile)){
					this.show=false
					if (this.payFlag) {
						uni.showLoading({
							title: '请稍候',
							mask: true
						});
						let res = await addOrder(this.priceList[this.current].id,this.name,this.mobile);
						if (res.msg == 'success') {
							uni.hideLoading();
							let payInfo = JSON.parse(res.data);
							this.$wxPay(
								payInfo,
								function(res) {
									/*成功的回调*/
									if (res.err_msg == 'get_brand_wcpay_request:ok') {
										
										uni.navigateBack({
											delta: 1
										});
									}
								},
								function(e) {
									/**失败的回调*/
									
									uni.showToast({
										title: '支付失败，请退出重试',
										icon: 'none'
									});
									console.log('支付失败或取消支付');
								}
							);
						} else {
							
							uni.showToast({
								title: '支付失败，请退出重试',
								icon: 'none'
							});
						}
					} else {
						
						uni.showToast({
							title: '浏览器环境暂不支持',
							icon: 'none'
						});
					}
				}else{
					uni.showToast({
						title: '请先完善姓名和手机号',
						icon: 'none'
					});
				}
				
			}
		}
	}
};
</script>

<style lang="scss">
@import './css/recharge.scss';
</style>
